<template>
  <div class="start utils-flex-Justend">
    <button @click="cancel">返回</button>
  </div>
</template>

<script>
  import { MqttUtil } from '@/utils/MqttUtil.js';
  export default {
    props: ['panel'],
    watch: {
      panel: {
        handler(val) {
          this.initMqtt()
        },
        immediate: true
      }
    },
    methods: {
      cancel() {
        this.$store.commit('changePanel',`${this.panel}$${+new Date()}`)
        console.log('点击事件-返回-外');
        this.$utils.util.isStatus(() => {
          console.log('点击事件-返回');
          this.mqtt.pubTopic('check_cancel', JSON.stringify({ type: true }));
        }, 'pub');
      },
      initMqtt() {
        this.mqtt = new MqttUtil(`mqtt://${this.mqtt_mixin.url}`);
        this.$utils.util.isStatus(() => {
          this.mqtt.setSubTopic('check_cancel');
          this.mqtt.subTopic((top, message) => {
            message = JSON.parse(message.toString());
            console.log('接受事件-返回');
            this.cancel();
          });
        }, 'sub');
      },
    },

  }
</script>

<style lang="less" scoped>
  .start {
    // width: 100%;
    box-sizing: border-box;
    padding-top: 5px;
    padding-right: 5px;
    // padding-right: 10px;
    // height: 60px;
    button {
      border-radius: 5px;
      width: 60px;
      background-color: #2BC7F6;
      color: white;
      height: 25px;
      border: none;
      cursor: pointer;

    }
  }
</style>
